<template>
    <!-- 对话框表单 -->
    <el-dialog :title="formData.id ? '编辑' : '新增'" width="700px" v-model="dialogVisible" :close-on-click-modal="false"
        :destroy-on-close="true">
        <div>
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
                <el-form-item prop="name" label="游戏名称">
                    <el-input v-model="formData.name" type="string" placeholder="请输入名称" clearable maxlength="50" />
                </el-form-item>
                <el-form-item prop="short" label="游戏别名">
                    <el-input v-model="formData.short" type="string" placeholder="请输入连接" clearable maxlength="50" />
                </el-form-item>
                <el-form-item label="版本" prop="version">
                    <el-input v-model="formData.version" type="string" placeholder="版本" maxlength="50" />
                </el-form-item>
                <el-form-item label="资源大小" prop="game_size">
                    <el-input v-model="formData.game_size" type="string" placeholder="资源大小" maxlength="50" />
                </el-form-item>
                <el-form-item label="MD5" prop="md5">
                    <el-input v-model="formData.md5" type="string" placeholder="MD5" maxlength="50" />
                </el-form-item>
                <el-form-item label="apk包名" prop="package_name">
                    <el-input v-model="formData.package_name" type="string" placeholder="apk包名" maxlength="50" />
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="下载详情页图(308*351)" prop="image">
                            <FileUpload v-model="formData.image" :limit="1"></FileUpload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="url" label="上传安装包">
                            <FileUpload v-model="formData.url" :limit="1" uploadType="2" ailiyunOss :fileSize="5000">
                            </FileUpload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="text-align: center;">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button @click="onSubmit(formRef)" type="primary">保存</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, inject, ref } from 'vue'
import { addApk, editApk } from '@/api/apk';
const emit = defineEmits(['subOk']);
const used = inject('used');
const formRef = ref('formRef');
let dialogVisible = ref(false);

//  表单数据
const defaultFormData = {
    id: '',
    name: '',
    short: '',
    image: '',
    version: '',
    game_size: '',
    md5: '',
    package_name: '',
    path: '',
    url: '',
}
let formData = reactive({ ...defaultFormData })
//表单验证规则
const rules = reactive({
    name: [{ required: true, message: '请输入游戏名称', trigger: 'blur' },],
    short: [{ required: true, message: '请输入游戏别名', trigger: 'blur' },],
    version: [{ required: true, message: '请输入版本', trigger: 'blur' },],
    game_size: [{ required: true, message: '请输入资源大小', trigger: 'blur' },],
    md5: [{ required: true, message: '请输入md5', trigger: 'blur' },],
    package_name: [{ required: true, message: '请输入apk包名', trigger: 'blur' },],
    image: [{ required: true, message: '请上传图片', trigger: 'change' },],
    url: [{ required: true, message: '请上传安装包', trigger: 'change' },],
})
/* 显示 */
const show = (item, type) => {
    defaultFormData.type = type;
    if (item) {
        Object.keys(defaultFormData).forEach(key => {
            formData[key] = item[key] ?? defaultFormData[key];
        });
    } else {
        Object.assign(formData, defaultFormData);
    }
    dialogVisible.value = true;
}
/*  提交 */
const onSubmit = (formEl) => {
    formEl.validate((valid) => {
        if (valid) {
            console.log(formData);
            formData.path = used.removeDomainFromUrl(formData.url);
            let res = formData.id ? editApk(formData, 'post') : addApk(formData, 'post');
            res.then((res) => {
                used.msgSuccess(res.message)
                if (res.code == 1) {
                    dialogVisible.value = false;
                    emit('subOk');
                }
            })
        } else {
            return false;
        }
    });
};

//
defineExpose({
    show
})
</script>

<style scoped lang="scss">
.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: var(--el-border-radius-small);
    box-shadow: var(--el-box-shadow-light);
    border: 1px dashed var(--el-border-color);
    cursor: pointer;
    overflow: hidden;
    width: 110px;
    height: 110px;
}

.avatar-uploader:hover {
    border-color: var(--el-color-primary);
}

.avatar {
    width: 110px;
    height: 110px;
    display: block;
}

.image-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
</style>
